<template>
    <div class="openflow-login">
        <div class="openflow-login-box">
            <div class="openflow-login-header">
                <span>开源工作流平</span><span>台</span>
            </div>
            <el-form class="login-form" label-position="top">
                <el-tabs v-model="activeName" stretch>
                <el-tab-pane label="账号登录" name="first" >
                    <el-form-item  prop="username" required class="form-item">
                        <el-input v-model="formdata.username" placeholder="账号" ></el-input>
                    </el-form-item>
                    <el-form-item  prop="password" required class="form-item">
                        <el-input v-model="formdata.password" type="password" show-password placeholder="密码"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane disabled label="手机号登录" name="third">手机号登录</el-tab-pane>
                    <el-form-item class="form-item">
                        <el-button type="primary"   :loading="loading" @click="toLogin"  style="width: 100%">
                            登 录
                        </el-button>
                    </el-form-item>
                </el-tabs>
            </el-form>
        </div>
</div>
</template>

<script setup>
    import { ref } from 'vue'   
    import { useUserStore } from '~/store/user'
    const userStore = useUserStore();
    import { useRoute, useRouter } from 'vue-router'
    import { usePermissionStore } from "~/store/permission.js";
    const permissionStore = usePermissionStore();
    const router = useRouter()
    const loading = ref(false);
    const activeName = ref('first')
    const formdata = ref({
        username: "admin",
        password: "admin"
    })


    const toLogin = () => {
        loading.value = true;
       
        userStore.loginByAccount(formdata.value).then((result) => {
            console.log(result)
            router.push({path: "/"})
        }).catch((e)=>{
            loading.value = false;
            // 重新获取验证码
        });
      
    }
</script>

<style  scoped>
    .form-item{
        padding-top: 10px;
        padding-bottom: 5px;
    }
  
    .openflow-login{
        display: grid;
        place-items: center;
        height: 100vh; /* 父元素的高度 */
        background-image: url('/pg.png') ;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .openflow-login-header{
        text-align: justify;
        text-align-last: justify;
        /* margin: 20px 0; */
        font-size: 20px;
        font-weight: 600;
        /* letter-spacing: 28px; */
        width: 400px;
    }
    .openflow-login-box{
        padding: 40px 60px;
        background: #ffffff;
    }
</style>
